<!--
 * @Author: your name
 * @Date: 2021-10-10 09:40:32
 * @LastEditTime: 2021-10-10 14:39:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\pages\Ref_learn\shallowRefs.vue
-->
<template>
  <h1>
    shallowRef
  </h1>

  <a-typography>

    <a-typography-paragraph>
      <p>count1: {{ shallData.count1 }}</p>
      <a-button @click="() => shallData.count1 ++">add1</a-button>

      <p>count3: {{ shallData.obj.count2 }}</p>
      <a-button @click="() => shallData.obj.count2 ++">add2</a-button>

      <a-button @click="() => {
        shallData = {
          count1: shallData.count1 += 1,
          obj: {
            count2: shallData.obj.count2,
          }
        }
        return shallData
      }">change</a-button>
    </a-typography-paragraph> 
    
  </a-typography>
</template>

<script>
import { ref, shallowRef } from 'vue'
export default {
  setup(props) {
    let data = {
      count1: 1,
      obj: {
        count2: 2,
      }
    }
    // data = ref(data)
    let shallData = shallowRef(data)

    return {
      shallData,
    }
  }
}
</script>

<style>

</style>